var container = $('#main');
container.width($(window).width());
container.height($(window).height());


$(window).resize(function () {
    chart.resize();
    container.height($(window).height());
    container.width($(window).width());
});

var chart = echarts.init(container[0]);


var socket = io.connect(location.origin);
socket.on('capital', function (data) {
    chart.setOption(getOption(data));
});

/**
 * 绘制图表
 * @param  {object} data 接口请求道德数据
 * @return {object}      option配置
 */
function getOption(data) {

    var axis = [];
    var series = [];
    // rgb(182,220,83) // rgb(197, 146, 160) //rgb(176, 58, 91)
    var colors = ['#C23531', '#D48265', '#C9A67E', '#91C7AE', '#61A0A8'];
    var names = ['主力净流入', '超大单净流入', '大单净流入', '中单净流入', '小单净流入'];

    for (var i = 0; i < 5; i++) {
        series.push({
            name: names[i],
            type: 'line',
            smooth: true,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: function(params) {
                        return params.seriesName + ' ' + params.value;
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: ''
                }
            },
            // areaStyle: {normal: {}},
            symbol: 'none',
            // symbolOffset: [0, '50%'],
            sampling: 'average',
            stack: false,
            data: []
        })
    }

    data.items.forEach(function(value, key) {
        value.forEach(function(v, k) {
            if (k === 0) {
                axis.push(v);
            } else {
                series[k - 1].data.push(v);
                series[k-1].itemStyle.normal.color = colors[k-1]
            }
        })
    });

    var categories = ["09:30","09:31","09:32","09:33","09:34","09:35","09:36","09:37","09:38","09:39","09:40","09:41","09:42","09:43","09:44","09:45","09:46","09:47","09:48","09:49","09:50","09:51","09:52","09:53","09:54","09:55","09:56","09:57","09:58","09:59","10:00","10:01","10:02","10:03","10:04","10:05","10:06","10:07","10:08","10:09","10:10","10:11","10:12","10:13","10:14","10:15","10:16","10:17","10:18","10:19","10:20","10:21","10:22","10:23","10:24","10:25","10:26","10:27","10:28","10:29","10:30","10:31","10:32","10:33","10:34","10:35","10:36","10:37","10:38","10:39","10:40","10:41","10:42","10:43","10:44","10:45","10:46","10:47","10:48","10:49","10:50","10:51","10:52","10:53","10:54","10:55","10:56","10:57","10:58","10:59","11:00","11:01","11:02","11:03","11:04","11:05","11:06","11:07","11:08","11:09","11:10","11:11","11:12","11:13","11:14","11:15","11:16","11:17","11:18","11:19","11:20","11:21","11:22","11:23","11:24","11:25","11:26","11:27","11:28","11:29","11:30","13:01","13:02","13:03","13:04","13:05","13:06","13:07","13:08","13:09","13:10","13:11","13:12","13:13","13:14","13:15","13:16","13:17","13:18","13:19","13:20","13:21","13:22","13:23","13:24","13:25","13:26","13:27","13:28","13:29","13:30","13:31","13:32","13:33","13:34","13:35","13:36","13:37","13:38","13:39","13:40","13:41","13:42","13:43","13:44","13:45","13:46","13:47","13:48","13:49","13:50","13:51","13:52","13:53","13:54","13:55","13:56","13:57","13:58","13:59","14:00","14:01","14:02","14:03","14:04","14:05","14:06","14:07","14:08","14:09","14:10","14:11","14:12","14:13","14:14","14:15","14:16","14:17","14:18","14:19","14:20","14:21","14:22","14:23","14:24","14:25","14:26","14:27","14:28","14:29","14:30","14:31","14:32","14:33","14:34","14:35","14:36","14:37","14:38","14:39","14:40","14:41","14:42","14:43","14:44","14:45","14:46","14:47","14:48","14:49","14:50","14:51","14:52","14:53","14:54","14:55","14:56","14:57","14:58","14:59","15:00"];

    series.push({
        name: '',
        type: 'line',
        showSymbol: false,
        data: categories,
        itemStyle: {
            normal: {
                opacity: 0
            }
        },
        lineStyle: {
            normal: {
                opacity: 0
            }
        }
    });

    return {
        backgroundColor: '#161627',
        title: {
            text: '实时资金流向图（净流入）',
            textStyle: {
                color: '#ccc'
            },
            left: '5%',
            top: '1%'
        },
        tooltip: {
            trigger: 'axis',
            show: false,
            textStyle: {
                color: '#ccc'
            }
        },
        legend: {
            data: names,
            itemGap: 20,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            top: '2%'
        },
        grid: {
            left: '4%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false
                },
                // magicType: {
                //     show: true,
                //     type: ['line', 'bar', 'candlestick', 'tiled']
                // },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: categories,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(51, 51, 51, 0.6)'
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(51, 51, 51, 0.6)'
                }
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#ccc'
                }
            }
        },
        series: series.slice()
    };

}